<template>
    <div>
        <!-- 异步组件的使用 -->
        <el-button @click="handleClick">切换</el-button>
        <div v-if="show">
            <!-- <List /> -->
            <AsyncList />
        </div>
    </div>
</template>

<script>
import LoadComponent from "./LoadComponent";
import ErrorComponent from "./ErrorComponent";
// 还可以通过工厂函数方法 webpackChunkName 可以修改请求的js文件名 不能省略
const AsyncList = () => ({
    component: import(/* webpackChunkName: 'list' */ "./List"),
    loading: LoadComponent,
    error: ErrorComponent,
    delay: 100,
    timeout: 3000,
});
export default {
    components: {
        // ---------1----------------------
        // 异步加载组件：进入页面不会加载 只有点击按钮时向服务器发请求 获取(x.js)文件
        // List:()=>import(/*webpackChunkName:'list'*/'./List')
        // ----------2-------------
        AsyncList,
    },
    data() {
        return {
            show: false,
        };
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        },
    },
};
</script>

<style>
</style>